<template>
  <div class="mod-config">
    <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#eeeeee" mode="horizontal" @select="handleSelect" >
      <el-menu-item index="1">图像列表一</el-menu-item>
      <el-menu-item index="2">图像列表二</el-menu-item>
      <el-menu-item index="3">图像列表三</el-menu-item>
      <el-menu-item index="4">图像列表四</el-menu-item>
      <el-menu-item index="5">图像列表五</el-menu-item>
      <el-menu-item index="6">图像列表六</el-menu-item>
    </el-menu>
    <!-- 图像列表 -->
    <div>
      <upload-simulate v-if="uploadImageVisible" ref="uploadImage" @refreshDataList="getDataList"></upload-simulate>
      <el-button type="primary" style="margin-top: 5px;margin-bottom: 5px;margin-left: 10px;" plain size="mini" @click="uploadImageHandle()" >点击上传图片</el-button>
      <el-row class="image-list" :gutter="16">
         <el-col :lg="6" :sm="12" class="vm-margin" v-for="item in dataList" :key="item.id">
           <el-card class="card-img" style="width: 300px;height: 250px;margin-right: 10px;">
             <img :src="item.src" style="width: 250px; height: 200px;" alt="">
             <div class="control">
               <span class="delete">
                   <el-button style="margin-top: -20px;margin-left: 200px;" type="primary" icon="el-icon-delete" @click="deleteImage(item.id)" circle></el-button>
               </span>
             </div>
           </el-card>
         </el-col>
       </el-row>
    </div>
    <div>
    </div>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[8, 16, 40, 80]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  /* eslint-disable */
  import UploadSimulate from '../compont/upload-simulate.vue'
  export default {
    data () {
      return {
        dataForm: {
          experimentName: ''
        },
        uuid:'c3030bd489494a6c8d35568578cf472a',//人脸识别:'',//点击哪个table就设置对于的uuid
        uploadImageVisible: false,
        selectedImage:true,
        activeIndex: '1',
        experimentName:[],
        dataList: [],
        pageIndex: 1,
        pageSize: 8,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        keyPath:''
      }
    },
    components: {
      UploadSimulate
    },
    created() {
      this.getDataList()
    },
    activated () {
      this.getDataList()
      this.getExperimentList()
    },
    methods: {
      //删除图像
      deleteImage(id){
        this.$confirm('确定进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/recommend/delete'),
            method: 'get',
            params: this.$http.adornParams({
              'id': id
            })
          }).then(({data}) => {
            if (data.success) {
              this.$message({
                message: '图像删除成功!',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              });
            }
          })
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        if(key == 1){ //人脸检测
          this.uuid = 'c3030bd489494a6c8d35568578cf472a'
          this.getDataList()
        }
        else if(key == 2){
          this.uuid = 'c3030bd489494a6c8d35568578cf4729'
          this.getDataList()
        }
        else if(key == 3){
          this.uuid = 'c3030bd489494a6c8d35568578cf4710'
          this.getDataList()
        }
        else if(key == 4){
          this.uuid = 'c3030bd489494a6c8d35568578cf4711'
          this.getDataList()
        }
        else if(key == 5){
          this.uuid = 'c3030bd489494a6c8d35568578cf4712'
          this.getDataList()
        }
        else if(key == 6){
          this.uuid = 'c3030bd489494a6c8d35568578cf4713'
          this.getDataList()
        }
        this.keyPath = keyPath
      },
      handleAvatarSuccess(response) {
        if (response.success) {
          this.selectedImage = false
          this.dataForm.inputImage = response.data
        }else{
          this.$message.error(response.message)
        }
       },
       uploadImageHandle () {
         this.uploadImageVisible = true
         this.$nextTick(() => {
           this.$refs.uploadImage.init(this.uuid)
         })
       },
       //图像上传
       uploadImg() {
         return this.$http.adornUrl('/file/image');
       },
       handleAvatarSuccess(response) {
         if (response.success) {
           this.selectedImage = false
           this.dataForm.inputImage = response.data
         }else{
           this.$message.error(response.message)
         }
        },
      // 获取所有的实验
      getExperimentList () {
        this.$http({
          url: this.$http.adornUrl('/course/getExperimentName'),
          method: 'post',
          data: this.$http.adornData({

          })
        }).then(({data}) => {
          if(data.success){
            this.experimentName = data.data
          } else {
            this.$message.error(data.message)
          }
        })
      },
      // 获取图像数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/recommend/page'),
          method: 'post',
          data: this.$http.adornData({
            'experimentUuid': this.uuid,
            'pageNumber': this.pageIndex,
            'pageSize': this.pageSize
          })
        }).then(({data}) => {
          if (data.success) {
            this.dataList = data.data.records
            this.totalPage = data.data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
    }
  }
</script>
